<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<div id="app">
			<category-component :list="categories"></category-component>
		</div>
		
	    <script type=text/javascript src="../../vue.js"></script>
        <script>
            const CategoryComponent = {
          		name: 'catComp',
          		props: {
          			list: {
          				type: Array
          			}
          		},
        	  	
          		template: `
          			<ul>
          				<!-- 如果list为空，表示没有子分类了，结束递归 -->
          				<template v-if="list">
        						<li v-for="cat in list">
        							{{cat.name}}
        							<catComp :list="cat.children"/>
        						</li>
        					</template>
          			</ul>
          			`
            }
        	const app = Vue.createApp({
        	    data(){
        	        return {
        	            categories: [
        	  		    {
        		  			name: '程序设计', 
        		  			children: [
        		  				{
        		  					name: 'Java', 
        		  					children: [
        		  						{name: 'Java SE'}, 
        		  						{name: 'Java EE'}
        		  					]
        		  				}, 
        		  				{
        		  					name: 'C++'
        		  				}
        		  			]
        	  		    },
        			    {
          					name: '前端框架', 
          					children: [
          						{name: 'Vue.js'}, 
          						{name: 'React'}
          					]
        			    }]
        	        }
        	  	},
        	    components: {
        	  	    CategoryComponent
        	    }
        	}).mount('#app');
        </script>
	</body>
</html>